<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>ACCP</title>
    <style>
        .table {
            font-size: 16px;
            color: #666;
            width: 240px;
            margin: 15px auto;
            padding: 15px 30px;
            text-align: right;
            border: #ccc 2px solid;
        }
        .info {
            color: #000;
            font-weight: bolder;
        }
        .button {
            width: 240px;
            display: block;
            margin: 15px auto;
            padding: 15px 30px; 
            font-size: 16px;
            color: #FFF;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
            appearance: none;
            border: none;
            box-sizing: border-box;
        }
        .range{
            width: 180px;
            margin: 15px auto; 
            padding: 15px 30px;
            text-align: center;
        }
        .blue {
            background-color: #1B9AF7;
            border-color: #1B9AF7;
        }
        .orange {
            background-color: #FEAE1B;
            border-color: #FEAE1B;
        }
        .green{
            background-color: #A5DE37;
            border-color: #A5DE37;
        }
        .red{
            background-color: #FF4351;
            border-color: #FF4351;
        }
        @media (max-width: 600px) {
            .button {
                font-size: 14px;
                padding: 10px 20px; /* Adjust padding for smaller screens */
            }
        }
    </style>
</head>
<body>
    <center><h3>空调控制面板</h3></center>
    <hr>
    <button id='setHeating' class='button orange'>加热</button>
    <button class='button blue'>制冷</button>
    <button class='button blue'>扫风</button>
    <button class='button green'>开机</button>
    <button class='button red'>关机</button>
    <hr>
    <p class='range'>
    <input  type='range' min='16' max='28' step='1'/>
    <output id='value'></output>
    </p>
    <button id='setTemperature' class='button blue'>目标温度设置</button>
    <hr>
    <center><p style='font-size: 18px;'>当前参数</p></center>
    <table class='table'>
        <tr>
            <td width='65%'>温度：</td>
            <td class='info'>21</td>
        </tr>
        <tr>
            <td>湿度：</td>
            <td class='info'>96</td>
        </tr>
        <tr>
            <td>温度目标值：</td>
            <td class='info'>28</td>
        </tr>
        <tr>
            <td>运行状态：</td>
            <td class='info'>加热</td>
        </tr>
    </table>
<script>
    var range = document.querySelector("input[type='range']");
    var output = document.getElementById('value');
    output.textContent = range.value;
    range.addEventListener('input', function() {
        output.textContent = range.value;
    });

    document.getElementById('setHeating').addEventListener('click', function() {
    fetch('/setHeating', {
        method: 'GET',
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch((error) => {
        console.error('Error:', error);
    });
    });


    document.getElementById('setTemperature').addEventListener('click', function() {
    fetch('/setTemperature', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        ct: range.value,
    })
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch((error) => {
    console.error('Error:', error);
    });
    });
</script>
</body>
</html>